$(function(){
	//页面加载完成之后执行
	pageInit();
});
function pageInit(){
	//创建jqGrid组件
	jQuery("#studentlist").jqGrid(
			{
				url : ctx+'/student/listjson',//组件创建完成之后请求数据的url
				datatype : "json",//请求数据返回的类型。可选json,xml,txt
				colNames : ['Actions', 'Id', 'Name', 'Age', '性别', '兴趣','教育', ],//jqGrid的列显示名字
				colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
					
				             {label:"ID",name : 'id',index : 'id',width : 55}, 
				             {label:"名称", name : 'name',index : 'name',width : 90, editable: true}, 
				             {label:"年龄", name : 'age',index : 'age',width : 100, editable: true},
				             {label:"性别", name : 'sexual',index : 'sexual',width : 100, editable:true, 
				            	 edittype:"select",
				            	 editoptions:{value:"0:女;1:男"},
				            	 formatter:function(value,options, rowData){
				            		 if(value==0){
				            			 return '女';
				            		 }else{
				            			 return '男';
				            		 }
				            	 }
				             }, 
				             {label:"兴趣", name : 'interest',index : 'interest',width : 80,align : "right",
				            	 editable:true,
				            	 edittype:"checkbox",
				            	 editoptions:{value:"1:阅读;2:唱歌;3:跳舞;4:运动"},
				            	 formatter:function(value,options, rowData){
				            		 if(value==null)
				            			 return "";
				            		 
				            		 var returnValues='';
				            		 var valueArray = value.split(',');
				            		 for(var i=0; i<valueArray.length; i++){
				            			 if(valueArray[i]==1){
				            				 returnValues += '阅读,';
				            			 }else if(valueArray[i]==2){
				            				 returnValues += '唱歌,';
					            		 }else if(valueArray[i]==3){
					            			 returnValues += '跳舞,';
					            		 }else if(valueArray[i]==4){
					            			 returnValues += '运动';
					            		 }
				            		 }
				            		 return returnValues;
				            	 }
				             }, 
				             {name : 'education',index : 'education',width : 80,align : "right",
				            	 formatter:function(value,options,rowData){
				            		 if(value==1){
				            			 return '大专';
				            		 }else if(value==2){
				            			 return '本科';
				            		 }else if(value==3){
				            			 return '硕士';
				            		 }else if(value==2){
				            			 return '博士';
				            		 }
				            	 }
				             }, 
				             {name : 'act',index : 'act',width : 75,sortable : false}, 
				              
				           ],
				rowNum : 10,//一页显示多少条
				rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
				pager : '#studentlistpager',//表格页脚的占位符(一般是div)的id
				sortname : 'id',//初始化的时候排序的字段
				sortorder : "desc",//排序方式,可选desc,asc
				mtype : "get",//向后台请求数据的ajax的类型。可选post,get
				viewrecords : true,
				caption : "JSON Example",//表格的标题名字
				'cellEdit' : true,
				'cellsubmit' : 'remote',
				 'cellurl' : ctx + '/student/update',
//				onSelectRow : function(id){
//					var data = $(this).getRowData(id);
//					alert(JSON.stringify(data));
//					
//				}
				 onSelectRow:EditSelectRow,
//				 gridComplete : function() { // 第二步：数据加载完成后 添加操作按钮  
//			            var ids = $("#studentlist").jqGrid('getDataIDs'); //获取表格的所有列
//			            for (var i = 0; i < ids.length; i++) {
//			                var id = ids[i];
//			                var editBtn = "<div class='btnBox'> "
//			                                + "<button type='button'  onclick='editParam("
//			                                + id
//			                                + ")'>编辑</button>"
//			                                + "<button type='button' onclick='saveParam("
//			                                + id
//			                                + ")'>保存</button>"
//			                                + "<button type='button'  onclick='cancelParam("
//			                                + id + ")'>取消</button> </div>"
//
//			                $("#studentlist").jqGrid('setRowData',ids[i], {edit : editBtn}); //给每一列添加操作按钮
//			                }//end for (var i = 0; i < ids.length; i++)
//			        }
				 
				 gridComplete : function() {
		              var ids = jQuery("#studentlist").jqGrid('getDataIDs');
		              for ( var i = 0; i < ids.length; i++) {
		                var cl = ids[i];
		                be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#studentlist').editRow('"
		                    + cl + "');\" />";
		                se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#studentlist').saveRow('"
		                    + cl + "');\" />";
		                ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#studentlist').restoreRow('"
		                    + cl + "');\" />";
		                jQuery("#studentlist").jqGrid('setRowData', ids[i],
		                    {
		                      act : be + se + ce
		                    });
		              }
		            },
		          editurl : ctx+"/student/RowEditing",
			});
	/*创建jqGrid的操作按钮容器*/
	/*可以控制界面上增删改查的按钮是否显示*/
	jQuery("#studentlist").jqGrid('navGrid', '#studentlistpager', {edit : true,add : true,del : false});
}

function getRowDate(id){
	var data = onSelectRow(id);
	alert(JSON.stringify(data));
}

//选中行启用行编辑
function EditSelectRow(id)
{
	alert($("#selectRowId").val());
    //原选中行ID
    var oldSelectRowId = $("#selectRowId").val();
    if (oldSelectRowId != null && oldSelectRowId != "" && oldSelectRowId.length > 0) {
        $("#fieldGrid").jqGrid('saveRow', oldSelectRowId);//保存上一行
    }

    //当前选中行
    $("#selectRowId").val(id);//临时存储当前选中行
    //$("#fieldGrid").jqGrid('editRow', id);
    $("#fieldGrid").jqGrid('editRow', id, { keys: true, focusField: 1 });
}


function editParam(rowId) { //第三步：定义编辑操作

    var parameter = {
           oneditfunc : function(rowid) { //在行成功转为编辑模式下触发的事件，参数为此行数据id
            //alert("edited" + rowid);
        }}
    jQuery("#studentlist").editRow(rowId);//开启可编辑模式
    //jQuery("#list").editRow(rowId,parameter); //如果需要参数
    jQuery('#studentlist' ).jqGrid('editRow', rowId, true,pickdates);//开启可编辑模式
}

